<template>
  <div class="site-page">
    <headBar class="head flex">
      <div slot="xm-header-center" class="search flex-1 flex flex-align-center">
        <input type="text" placeholder="输入城市名称">
        <i class="icon icon-search"></i>
      </div>
      <div slot="xm-header-right">
        <div class="btn search-btn">
          搜索
        </div>
      </div>
    </headBar>
    <h3 class="tit">当前城市：重庆</h3>
    <section class="city-group">
      <h4>定位城市</h4>
      <div class="item border-1px">重庆市</div>
      <h4>最近访问城市</h4>
      <div class="item border-1px">重庆市</div>
      <div class="item border-1px">重庆市</div>
    </section>
    <mt-index-list class="city-list" :height=height>
      <mt-index-section index="A">
        <p title="A1" class="address">鞍山</p>
        <p title="A1" class="address">安阳</p>
        <p title="A1" class="address">阿拉伯</p>
      </mt-index-section>
      <mt-index-section index="B">
        <p class="address">北京</p>
        <p class="address">北京</p>
        <p class="address">北京</p>
        <p class="address">北京</p>
        <p class="address">北京</p>
        <p class="address">北京</p>
      </mt-index-section>
      <mt-index-section index="C">
        <p class="address">重庆</p>
        <p class="address">重庆</p>
        <p class="address">重庆</p>
        <p class="address">重庆</p>
        <p class="address">重庆</p>
        <p class="address">重庆</p>
        <p class="address">重庆</p>
      </mt-index-section>
      <mt-index-section index="D">
        <p class="address">山东</p>
        <p class="address">山东</p>
        <p class="address">山东</p>
        <p class="address">山东</p>
        <p class="address">山东</p>
        <p class="address">山东</p>
      </mt-index-section>
      <mt-index-section index="E">
        <p class="address">鹅岭</p>
        <p class="address">鹅岭</p>
        <p class="address">鹅岭</p>
        <p class="address">鹅岭</p>
        <p class="address">鹅岭</p>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>
<script>
    export default {
        props: {},
        data() {
            return {
                height: document.documentElement.offsetHeight - 500
            };
        },
        methods: {},
        filters: {},
        created() {

        },
        mounted(){
        },
        components: {
        }
    };
</script>
<style lang="less">
  @import "./site.less";
</style>
